<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">


<h:body>
<p:growl id="messages" showDetail="true"/>  

<h:form enctype="multipart/form-data">  
  
    <p:fileUpload fileUploadListener="#{productBean.handleFileUpload}"  
            mode="advanced"  
            update=":messages,:centerContentPanel"   
            multiple="true"  
            sizeLimit="1000000"   
            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>           
</h:form>  



<h:form>

<p:dataTable var="image" selection="#{productBean.selectedImage}" selectionMode="single" rowKey="#{image.imageId}" value="#{productBean.loadedImages}"  
     id="imageList" editable="true">  
  
        <f:facet name="header">  
            Image List  
        </f:facet>  
  
  
        <p:column headerText="ImageId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.imageId}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{image.imageId}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="path" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.path}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{image.path}" style="width:100%" label="Year"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="displayOrder" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.displayOrder}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{image.displayOrder}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
        
        <p:column headerText="instanceId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.instanceId}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{image.displayOrder}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="image type" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.type}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{image.type}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="defaultFlag" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.defaultFlag}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{image.defaultFlag}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
        
  
        <f:facet name="footer">  
             <p:commandButton  id="deleteImages" value="deleteImages" icon="ui-icon-add"  action="#{productBean.onImageDelete}" update=":centerContentPanel"/>
             <p:commandButton  id="editImages" value="editImage" icon="ui-icon-add"  action="#{productBean.onEditImageInput}"  oncomplete="dlg.show()" update=":addDialog" />
        </f:facet>   
  
    </p:dataTable> 
</h:form>

<p:dialog id="addDialog" header="Edit image" widgetVar="dlg">  
    <h:form>  
        <h:panelGrid columns="2" cellpadding="5">  
            <h:outputLabel for="imageId" value="id" />  
            <p:inputText value="#{productBean.editedImage.imageId}"   
                    id="imageId"   label="imageId" />
                    
            <h:outputLabel for="path" value="Path:" />  
            <p:inputText value="#{productBean.editedImage.path}"   
                    id="path" required="true" label="path" /> 
                    
            <h:outputLabel for="displayOrder" value="DisplayOrder:" />  
            <p:inputText value="#{productBean.editedImage.displayOrder}"   
                    id="displayOrder" required="true" label="displayOrder" /> 
                    
            <h:outputText value="DefaultFlag: *" />  
                    <p:selectOneMenu value="#{productBean.editedImage.defaultFlag}">  
			            <f:selectItem itemLabel="YES" itemValue="true" />  
			            <f:selectItem itemLabel="NO" itemValue="false" />
			        </p:selectOneMenu>  
            <h:outputLabel for="type" value="Type:" /> 
            <p:selectOneMenu value="#{productBean.editedImage.type}">  
			            <f:selectItems value="#{productBean.imageTypeList}" var="imageType" itemLabel="#{imageType}" itemValue="#{imageType}" />
			</p:selectOneMenu>  
                    
            <h:outputLabel for="instanceId" value="InstanceId:" />  
            <p:inputText value="#{productBean.editedImage.instanceId}"  
                    id="instanceId" required="true" label="instanceId" />
                      
            <f:facet name="footer">  
                <p:commandButton id="editImageButton" value="Submit" update=":centerContentPanel"   
                    actionListener="#{productBean.onEditImageSubmit}"   
                    oncomplete="handleLoginRequest(xhr, status, args)"/>  
            </f:facet>  
        </h:panelGrid>  
          
    </h:form>  
</p:dialog> 

<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
//         if(args.validationFailed || !args.loggedIn) {  
//             jQuery('#addDialog').effect("shake", { times:3 }, 100);  
//         } else {  
            dlg.hide();  
//         }  
    }  
</script>

</h:body>

</html>